import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import MdRenderer from "@components/mdRenderer";
import { useNavigate, useSearchParams } from "react-router-dom";
import { request } from "@apis/request";
import { connect } from "react-redux";
import {
    payGmoneyAction,
    addCartAction,
    changeManyToReadAction,
} from "@redux/actions";
import profile from "@depjs/profile";

const SingleGoods = (props) => {
    const { payGmoneyAction, addCartAction, changeManyToReadAction } = props;

    const navigate = useNavigate();
    // 获取？形式的路由参数
    const [params] = useSearchParams();
    const goodsId = params.get("goodsId");
    const sellerUserName = params.get("sellerUserName");
    const price = params.get("price");
    // console.log('goodsId: ', goodsId, 'sellerUserName: ', sellerUserName, 'price: ', price)

    const [isShowImages, setIsShowImages] = useState(false);
    const [isBuy, setIsBuy] = useState(false);
    const [data, setData] = useState({});
    const [loginName, setLoginName] = useState("");

    useEffect(() => {
        profile.ready(() => {
            setLoginName(profile.userName);
        });
    }, []);

    useEffect(() => {
        async function getGoodsData() {
            const res = await request("/mall/singleGoods", { goodsId });
            console.log("res: ", res);
            if (res.code === "0000") {
                setData(res.data);
            } else {
                console.log(res.msg);
            }
        }
        getGoodsData();
    }, [goodsId]);

    return (
        <div className={styles.singleGoods}>
            <div className={styles.head}>
                <div
                    className={styles.go_back}
                    onClick={() => {
                        navigate(-1);
                    }} // 返回上次访问的路由路径
                ></div>
            </div>
            <div className={styles.main}>
                <div className={styles.part1}>
                    <span>{data.goodsCate} </span>
                    &gt;&gt;
                    <span> {data.brand} </span>
                    &gt;&gt;
                    <span>
                        {" "}
                        {data.oldDegree === 10
                            ? "新品"
                            : `${data.oldDegree}成新`}{" "}
                    </span>
                    &gt;&gt;
                    <span> {data.goodsName}</span>
                </div>
                <div className={styles.details}>
                    <MdRenderer source={data.goodsDetails} />
                </div>
                <div className={styles.images}>
                    <div
                        className={styles.image_btn}
                        onClick={() => {
                            setIsShowImages(!isShowImages);
                        }}
                    >
                        {isShowImages ? "隐藏图片" : "查看图片"}
                    </div>
                    <div className={styles.images_container}>
                        <ul className={styles.images_ul}>
                            {isShowImages && (
                                <li>
                                    <img src={data.billImg} alt="" />
                                </li>
                            )}
                            {isShowImages &&
                                data.goodsImages.map((item) => {
                                    return (
                                        <li key={item.id}>
                                            <img src={item.img} alt="" />
                                        </li>
                                    );
                                })}
                        </ul>
                    </div>
                </div>
                <div className={styles.division}></div>
                {/* 如果是自己上架的货物，就不显示这三个按钮 */}
                {sellerUserName === loginName || (
                    <div className={styles.operations}>
                        {data.isAcceptCutPrice ? (
                            <div
                                className={styles.to_chat_btn}
                                onClick={() => {
                                    navigate(
                                        `/m/chat/chatWindow?goodsId=${goodsId}&loginUser=${loginName}&toUser=${sellerUserName}`
                                    );
                                    changeManyToReadAction(
                                        goodsId,
                                        sellerUserName
                                    );
                                }}
                            >
                                和卖家沟通
                            </div>
                        ) : null}
                        <div
                            className={styles.add_to_cart}
                            onClick={() => {
                                addCartAction(sellerUserName, goodsId);
                            }}
                        >
                            加入购物车
                        </div>
                        <div
                            className={styles.buy_now}
                            onClick={() => {
                                setIsBuy(true);
                            }}
                        >
                            立即购买
                        </div>
                    </div>
                )}
            </div>
            <div
                className={styles.bounced}
                style={{ display: isBuy ? "block" : "none" }}
                onClick={() => {
                    setIsBuy(false);
                }}
            ></div>
            <div
                className={`${styles.receive} ${isBuy ? styles.active : ""}`}
                onClick={(e) => {
                    e.stopPropagation();
                }}
            >
                <p>
                    <span className={styles.s1}>收货地址：</span>
                    <span>xx省xx市xx区xx街道xx小区xx幢xx号</span>
                </p>
                <p>
                    <span className={styles.s1}>收件人：</span>
                    <span>xxxxxx</span>
                </p>
                <p>
                    <span className={styles.s1}>手机号码：</span>
                    <span>13333333333</span>
                </p>
                <div
                    className={styles.to_pay}
                    onClick={() => {
                        payGmoneyAction(
                            sellerUserName,
                            goodsId,
                            parseFloat(price),
                            navigate
                        );
                    }}
                >
                    去支付
                </div>
            </div>
        </div>
    );
};

export default connect((state) => state, {
    payGmoneyAction,
    addCartAction,
    changeManyToReadAction,
})(SingleGoods);
